<template>
	<view>
		<!-- <u-image  mode="aspectFill" style="   width: 100%;height: 40vh;" :src="img"></u-image> -->
		<img mode="aspectFill" style=" width: 100%; height:40vh ;   " :src="img">  
		<view class="header">
			<view class="one">
				<view style=" width: 120rpx;height: 120rpx;float: left;z-index:9999;position: absolute;"
					@click="xiagan">
					<view class="hole" :data-content='contnetVar'></view>
				</view>
				<view class="title" style="	font-size: 36rpx;font-weight: bold;padding-left: 60px;">
					{{ganwei}}<span style="float: right;	font-size: 30rpx;margin-top: 3px;">{{vehicleName}}</span>
					<view style="font-size: 30rpx;color: #999999;margin-top: 28rpx;">
						{{nickName}} <span style="float: right;margin-top: 3px;">{{phonenumber}}</span>
					</view>
				</view>
			</view>
			<view>
				<u-grid :col="3" :border="false">
					<u-grid-item @click="Togwxz(1)">
						<i class="iconfont icon-gangwei" style="font-size: 60rpx;color: #9f9f9f;"></i>
						<view class="grid-text">岗位选择</view>
					</u-grid-item>
					<u-grid-item @click="Togwxz(2)">
						<i class="iconfont icon-cheliangyiban" style="font-size: 60rpx;color: #9f9f9f;"></i>
						<view class="grid-text">车辆选择</view>
					</u-grid-item>
					<u-grid-item @click="Togeren">
						<i class="iconfont icon-gerenshezhi" style="font-size: 60rpx;color: #9f9f9f;"></i>
						<view class="grid-text">个人设置</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="content">
			<u-cell-item @click="Towcgd">
				<i slot="icon" class="iconfont icon-wancheng" style="font-size:45rpx;color: #000;"></i>
				<view slot="title" style="margin-left: 5px;">
					我完成的工单
				</view>
			</u-cell-item>
			<!-- 	<u-cell-item show-message-card="true" @click="Tolxzz">
				<i slot="icon" class="iconfont icon-lianxi" style="font-size:45rpx;color: #000;"></i>
				<view slot="title" style="margin-left: 5px;">
					 <button type="default">联系作者</button>
				</view>
			</u-cell-item> -->

			<view class="u-cell" >
				<button type="default" class="btn" open-type="contact">
					<i class="iconfont icon-lianxi" style="font-size:45rpx;color: #000;"></i>
					<view style="margin-left: 5px;">
						联系作者
					</view>
					<u-icon name="arrow-right" color="#969799" style="font-size: 28rpx;float: right;    right: 0;margin-right: 32rpx;    position: absolute;"></u-icon>
				</button>
			</view>
			<u-cell-item :arrow="false" :value="`Dz v${version}`">
				<i slot="icon" class="iconfont icon-bangzhuguanyuwomen" style="font-size:45rpx;color: #000;"></i>
				<view slot="title" style="margin-left: 5px;">
					关于
				</view>
			</u-cell-item>
		</view>

		<view class="bq">
			© 2021-现在 GangXuankj.com 版权所有
		</view>
	</view>
</template>
<script>
	import {
		UserPostOff,
		UserList,
		PostListWorking,
		UserBack
	} from "@/pages/api/api";
	import config from '../../package.json'
	export default {
		data() {
			return {
				img:require('../../static/images/mybg.jpg'),
				contnetVar: "下班",
				nickName: uni.getStorageSync('nickName'),
				phonenumber: uni.getStorageSync('phonenumber'),
				vehicleName: "车辆未选择",
				ganwei: "岗位未选择",
				version: config.version,
				cheliang: {},
			}
		},
		onShow() {
			UserList({
				state: 1,
				userId: uni.getStorageSync('userId'),
			}).then(res => {
				console.log("获取车辆信息", res)
				if (res.code == 200) {
					this.cheliang = res.rows;
					if (res.rows.length != 0) {
						this.vehicleName = res.rows[0].vehicleName;

					}
				}
			})
			PostListWorking({
				userId: uni.getStorageSync('userId')
			}).then(res => {
				if (res.code == 200) {
					// console.log("获取岗位信息", res)
					if (res.data.length != 0) {
						this.ganwei = res.data[0].postName
					}

				}

			})
		},
		methods: {
			Togwxz(index) {
				uni.navigateTo({
					url: './gwxz?id=' + index

				});
			},
			Togeren() {
				uni.navigateTo({
					url: './geren'

				});
			},
			Towcgd() {
				uni.navigateTo({
					url: './wcgd'

				});
			},
			Tolxzz() {
				uni.navigateTo({
					url: './lxzz'

				});
			},
			async xiagan() {
				if (this.cheliang.length > 0) {
					await UserBack({
						vehicleId: this.cheliang[0].vehicleId,
					}).then(res => {
						console.log("退还", res)

					})
				}

				UserPostOff().then(res => {
					if (res.code == 200) {
						uni.clearStorageSync();
						uni.reLaunch({
							url: '../index/login'
						});
					}
				})

			},


		}
	}
</script>
<style lang="scss" scoped>
	.header {
		width: 90%;
		margin: -79px auto 0;
		background: #fff;
		border-radius: 5px;
		position: relative;
		left: 0;
		right: 0;
		z-index: 9999;

		.one {
			border-bottom: 1px solid #f9f2f2;
			padding: 17px 0;
			width: 94%;
			margin: 0 auto;
			left: 0;
			right: 0;

			.title {
				left: 32rpx;
				position: relative;
				width: calc(100% - 50rpx);

			}
		}
	}

	.grid-text {
		margin-top: 40rpx;
		color: #000;
	}

	.content {
		background: #fff;
		width: 90%;
		overflow-y: scroll;
		left: 0;
		right: 0;
		margin: 10px auto 0;
		border-radius: 5px;

	}



	.hole:after {
		position: absolute;
		height: 90rpx;
		width: 90rpx;
		text-align: center;
		line-height: 90rpx;
		content: attr(data-content);
		border-radius: 50%;
		border: 10px solid #4a9add;
		color: #4a9add;
		font-weight: bold;
		font-size: 40rpx;
		overflow: hidden;
	}

	.bq {
		justify-content: center;
		display: flex;
		position: absolute;
		bottom: 10px;
		width: 100%;
		color: #ccc;
	}

	.btn {
		display: flex;
		align-items: center;
		background: #fff;
		font-size: 28rpx;
		padding: 26rpx 32rpx;
		border-bottom: 1px solid #f3f3f3;
		border-radius: 0;
		line-height: 54rpx;
		color: #606266;
	}

	.btn:active {
		background: #f7f8f9;
	}

	.btn::after {

		border: none
	}
</style>
